<template>
    <div class="slideshow-container">
        <div v-for="(slide, index) in slides" :key="index" class="mySlides" v-show="slideIndex === index">
            <div :class="slide.bgClass"></div>
            <p class="text-overlay">{{ slide.textOverlay }}</p>
            <p class="text-overlay-below">{{ slide.textOverlayBelow }}</p>
        </div>

        <a class="prev" @click="plusSlides(-1)">&#10094;</a>
        <a class="next" @click="plusSlides(1)">&#10095;</a>
    </div>
</template>

<script>
export default {
    data() {
        return {
            slideIndex: 0,
            slides: [
                { bgClass: 'bg1', textOverlay: '贴心服务', textOverlayBelow: '在忙碌的行程中为您减轻舟车劳顿' },
                { bgClass: 'bg2', textOverlay: '宽敞舒适', textOverlayBelow: '配备豪华精美家私，让您尽享奢华' },
                { bgClass: 'bg3', textOverlay: '畅行享乐', textOverlayBelow: '舒适下榻，为您的旅程增添一抹亮色' },
                // 在这里添加更多的幻灯片
            ],
        };
    },
    methods: {
        plusSlides(n) {
            this.slideIndex = (this.slideIndex + n + this.slides.length) % this.slides.length;
        },
    },
};
</script>

<style scoped>
.slideshow-container {
    max-width: 100vw;
    position: relative;
    margin: 0;
}

.mySlides {
    width: 100vw;
    height: 600px;
    overflow: hidden; /* 隐藏溢出内容，可选 */
}

.prev:hover{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    color: white;
    cursor: pointer;
}

.next:hover{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    color: white;
    cursor: pointer;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
    color: gray;
    cursor: pointer;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.text-overlay {
    position: absolute;
    top: 40%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
}

.text-overlay-below {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
}

.bg1{
    background-image: url('../assets/img01.png');
    background-size: cover;
    width: 100%;
    height: 100%;
}

.bg2{
    background-image: url('../assets/img02.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;
}

.bg3{
    background-image: url('../assets/img03.jpg');
    background-size: cover;
    width: 100%;
    height: 100%;
}
</style>